<template>
  <view class="container">
    <!-- 背景图片 -->
    <image 
      class="background-img"
      src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/information_bg.png"
      mode="aspectFill"
    ></image>

    <!-- 视频轮播区域 -->
    <view class="swiper-wrapper">
      <swiper 
        class="swiper" 
        :indicator-dots="true" 
        :autoplay="false"
        :circular="true"
        :current="activeIndex"
        @change="onSwiperChange"
      >
        <swiper-item 
          v-for="(item, index) in videoList" 
          :key="index"
          class="swiper-item"
        >
          <video
            class="video"
            :id="`video${index}`"
            :src="item.videoUrl"
            :poster="item.poster"
            :muted="muted"
            loop
            controls
            objectFit="contain"
            @play="onVideoPlay(index)"
            @pause="onVideoPause(index)"
            @click="toggleFullScreen"
            @fullscreenchange="onFullscreenChange"
            @error="onVideoError(index)"
            @loadedmetadata="onVideoLoaded(index)"
          ></video>
          
          <!-- 左上角静音按钮 -->
          <view class="mute-btn" @tap.stop="toggleMute">
            <image 
              class="mute-icon"
              :src="muted ? 'https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/icon/mute.png' : 'https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/icon/volume.png'"
            ></image>
          </view>
        </swiper-item>
      </swiper>

      <!-- 左右切换按钮 -->
      <view class="nav-btn left" @tap.stop="switchSlide('prev')">
        <image class="arrow" src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/icon/left.png"></image>
      </view>
      <view class="nav-btn right" @tap.stop="switchSlide('next')">
        <image class="arrow" src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/icon/right.png"></image>
      </view>
    </view>

    <!-- 资讯列表 -->
    <scroll-view class="news-list" scroll-y>
      <view 
        v-for="item in newsList" 
        :key="item.id" 
        class="news-item" 
        @tap="navToDetail(item.id)"
      >
        <view class="text-box">
          <text class="title">{{item.title}}</text>
          <text class="desc">{{item.desc}}</text>
        </view>
        <image class="news-img" :src="item.img" mode="aspectFill"></image>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      muted: true,
      playStatus: {}, // 新增播放状态记录
      videoList: [
        { 
          videoUrl: 'https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/video/1.mp4',
          poster: 'https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/information/swiper/1.png'
        },
        {
          videoUrl: 'https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/video/2.mp4',
          poster: 'https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/information/swiper/2.png'
        }
      ],
      newsList: []
    }
  },
  methods: {
    // 视频元数据加载完成
    onVideoLoaded(index) {
      if (this.activeIndex === index && !this.playStatus[index]) {
        this.playCurrentVideo()
      }
    },

    // 视频播放错误处理
    onVideoError(index, e) {
      console.error(`视频${index}加载失败:`, e.detail.errMsg)
      uni.showToast({ title: '视频加载失败', icon: 'none' })
    },

    // 视频暂停事件
    onVideoPause(index) {
      this.$set(this.playStatus, index, true)
    },

    // 视频播放事件
    onVideoPlay(index) {
      this.$set(this.playStatus, index, false)
      const video = uni.createVideoContext(`video${index}`)
      // video.muted(this.muted)
    },

    // 切换幻灯片
    switchSlide(type) {
      const oldIndex = this.activeIndex
      const total = this.videoList.length
      
      // 暂停当前视频
      const currentVideo = uni.createVideoContext(`video${oldIndex}`)
      currentVideo.pause()
      this.$set(this.playStatus, oldIndex, true)

      // 计算新索引
      let newIndex = oldIndex
      if (type === 'prev') {
        newIndex = (oldIndex - 1 + total) % total
      } else {
        newIndex = (oldIndex + 1) % total
      }
      
      // 更新索引并播放新视频
      this.activeIndex = newIndex
      this.$nextTick(() => {
        this.$set(this.playStatus, newIndex, false)
        this.playCurrentVideo()
      })
    },

    // 轮播切换处理
    onSwiperChange(e) {
      const oldIndex = this.activeIndex
      const newIndex = e.detail.current
      
      if (oldIndex === newIndex) return
      
      // 暂停旧视频
      const oldVideo = uni.createVideoContext(`video${oldIndex}`)
      oldVideo.pause()
      this.$set(this.playStatus, oldIndex, true)
      
      // 更新索引并播放新视频
      this.activeIndex = newIndex
      this.$set(this.playStatus, newIndex, false)
      this.playCurrentVideo()
    },

    // 播放当前视频（增强版）
    playCurrentVideo() {
      const index = this.activeIndex
      if (!this.playStatus[index]) {
        const videoContext = uni.createVideoContext(`video${index}`)
        videoContext.play().catch(err => {
          console.error('播放失败:', err)
        })
        videoContext.muted(this.muted)
      }
    },

    // 切换静音
    toggleMute() {
      this.muted = !this.muted
      const video = uni.createVideoContext(`video${this.activeIndex}`)
      // video.muted(this.muted)
    },

    // 切换全屏
    toggleFullScreen() {
      const videoContext = uni.createVideoContext(`video${this.activeIndex}`)
      videoContext.requestFullScreen()
    },

    // 全屏状态变化处理
    onFullscreenChange(e) {
      if (!e.detail.fullScreen) {
        setTimeout(() => {
          this.playCurrentVideo()
        }, 300)
        // #ifdef APP-PLUS
        plus.screen.lockOrientation("portrait-primary")
        // #endif
      } else {
        // #ifdef APP-PLUS
        plus.screen.lockOrientation("landscape-primary")
        // #endif
      }
    },

    // 保持其他方法不变
    navToDetail(id) {
      uni.navigateTo({
        url: `/pages/newsDetail/newsDetail?id=${id}`
      })
    },

    getNewsData() {
      uniCloud.callFunction({
        name: 'getNewsData',
        success: res => {
          if (res.result.success) {
            this.newsList = res.result.data
          } else {
            uni.showToast({ title: '数据加载失败', icon: 'none' })
          }
        },
        fail: err => {
          console.error('调用云函数失败', err)
          uni.showToast({ title: '网络请求失败', icon: 'none' })
        }
      })
    }
  },
  onShow() {
    this.getNewsData()
  }
}
</script>

<style scoped>
/* 保持原有样式不变 */
.container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.background-img {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0.9;
}

.swiper-wrapper {
  position: relative;
  margin: 20rpx;
}

.swiper {
  height: 500rpx;
  border-radius: 24rpx;
  overflow: hidden;
  background: #000;
}

.swiper-item {
  position: relative;
  width: 100%;
  height: 100%;
}

.video {
  width: 100%;
  height: 100%;
  background: #000;
}

.video ::v-deep .uni-video-cover-play-button {
  background: rgba(255,255,255,0.2) !important;
  border-radius: 50% !important;
}

.video ::v-deep .uni-video-time {
  color: #fff !important;
  font-size: 28rpx !important;
}

.mute-btn {
  position: absolute;
  top: 30rpx;
  left: 30rpx;
  z-index: 999;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mute-icon {
  width: 40rpx;
  height: 40rpx;
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  backdrop-filter: blur(10px);
}

.nav-btn.left {
  left: 20rpx;
}

.nav-btn.right {
  right: 20rpx;
}

.arrow {
  width: 40rpx;
  height: 40rpx;
}

.news-list {
  height: calc(100vh - 560rpx);
  padding: 0 20rpx 20rpx;
}

.news-item {
  display: flex;
  margin-bottom: 20rpx;
  padding: 20rpx;
  background: rgba(237, 218, 194, 0.9);
  border-radius: 16rpx;
  backdrop-filter: blur(10px);
}

.text-box {
  flex: 1;
  margin-right: 20rpx;
}

.title {
  font-size: 32rpx;
  color: #2d2d2d;
  line-height: 1.4;
  margin-bottom: 12rpx;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.news-img {
  width: 220rpx;
  height: 160rpx;
  border-radius: 12rpx;
  border: 2rpx solid rgba(139, 69, 19, 0.1);
}
</style>